-------------------------------------------v-text

v-text会把文本中的html标签输出而不解析

可以输出非 HTML 标签数据，无法转义 HTML 标签；

v-text文本指令实现的效果跟 {{}} 实现的效果是一样的

<span v-text="msg"></span>

<!-- 和下面的一样 -->
<span>{{msg}}</span>



-------------------------------------------v-html

v-html可以解析html标签。

可以输出非 HTML 标签数据，可以转义 HTML 标签；

标签内原先的内容将被覆盖

<span>{{msg}}</span>
<span v-html="msg"></span>

 msg: "<h2>高时银博客</h2>"


//渲染后

<span>&lt;h2&gt;高时银博客&lt;/h2&gt;</span>
<span><h2>高时银博客</h2></span>



-------------------------------------------v-show

v-show指令也是条件渲染指令，刚刚也提到了v-if指令和v-show指令有一个区别，

这个区别就是v-show指令的元素都会被渲染，只是表达式为假的元素会被设置css属性display:none，将其隐藏。


v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染


当我们需要频繁控制元素的显示与否时，推荐使用 v-show 指令，避免因为使用 v-if 指令而造成的高性能消耗。

根据表达式之真假值，切换元素的 display CSS property。


v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

vue1.0 v-show不支持template   vue2.0 v-show 支持 template


<div id="app">
	<h1 v-show="ok">Hello!</h1>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		ok:false
	}
});


//渲染后

<div id="app"><h1 style="display: none;">Hello!</h1></div>

-------------------------------------------v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真(truthy) 值的时候被渲染。

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

条件判断使用 v-if 指令：

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。


把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

v-if可以使用data对象，也可以直接使用表达式

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。


<div id="app">

    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
	
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		seen:true,
		ok:true
	}
});



-------------------------------------------v-else


可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。


在vue 1.0 v-else 可以在 v-show后面， 2.0 后不起作用


随机生成一个数字，判断是否大于0.5，然后输出对应信息：


<div id="app">
	<p v-if="Math.random() > 0.5">
		yes
	</p>
	<p v-else>
		no
	</p>
	<p v-if="ok">
		yes
	</p>
	<p v-else>
		no
	</p>
</div>




//构造器
var vm = new Vue({
	el: '#app',
	data: {
		ok:false
	}
});





-------------------------------------------v-else-if


顾名思义，充当 v-if 的“else-if 块”，可以连续使用：



<div id="app">
	<p v-if="type === 'A'">
		A
	</p>
	<p v-else-if="type === 'B'">
		B
	</p>
	<p v-else-if="type === 'C'">
		C
	</p>
	<p v-else>
		Not A/B/C
	</p>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		type:'D'
	}
});



-------------------------------------------v-if vs v-show


v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。




-------------------------------------------v-for

Array | Object | number | string | Iterable (2.6 新增)

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。


vue中列表循环需加 :key=”唯一标识” 唯一标识可以是item里面id index等，
因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM 



<!--常见的四种用法-->
<div v-for="item in items">  {{ item.text }}</div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>


<h1>迭代数组</h1>
<ul>
	<li v-for="tab in tabs" >{{tab}} </li>
</ul>

<h1>迭代数组 (带索引)</h1>
<ul>
	<li v-for="(tab,index) in tabs">{{index}} . {{tab}} </li>
</ul>


<h1>迭代数组对象</h1>
<dl>
	<dt v-for="tab in tabx" :key="tab.id">{{tab.name}} </dt>
</dl>


<h1>迭代单个对象</h1>
<ul>
	<li v-for="value in object">
	{{ value }}
	</li>
</ul>


<h1>迭代单个对象 (键值对)</h1>
<ul>
	<li v-for="(value,key) in object">
	{{key}} : {{ value }}
	</li>
</ul>


<h1>迭代单个对象 (键值对，索引)</h1>
<ul>
	<li v-for="(value,key,index) in object">
	{{index}}.{{key}} : {{ value }}
	</li>
</ul>


<h1>迭代整数  n是从1 开始的</h1>
<ul>
	<li v-for="n in 10">
	{{ n }}
	</li>
</ul>


data: {
		tabs: ['James', 'Emma', 'Jack', 'David', 'Michael'],//数组
		tabx: [{ id:1,name: 'James' }, { id:2,name: 'Emma' }, { id:3,name: 'David' }, { id:4,name: 'Michael'}],//数组对象
		object: {
				  name: '菜鸟教程',
				  url: 'http://www.runoob.com',
				  slogan: '学的不仅是技术，更是梦想！'
				} //对象
}

---------------------数组注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x'  <!--不是响应性的-->
vm.items.length = 2 <!-- 不是响应性的-->


使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名

<!-- Vue.set-->
Vue.set(vm.items, indexOfItem, newValue)
<!-- Array.prototype.splice-->
vm.items.splice(indexOfItem, 1, newValue)


---------------------对象注意事项

Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }}})
<!--你可以添加一个新的 age 属性到嵌套的 userProfile 对象-->
Vue.set(vm.userProfile, 'age', 27)

vm.$set(vm.userProfile, 'age', 27)



-------------------------------------------v-bind

v-bind  主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：



-------------------------------------------v-model

v-model只能用在：<input>    <select>    <textarea>  <components>

修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤



-------------------------------------------缩写

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>